<template>
    <section>
        <div class="order-container" v-loading="loading">
            <div class="header">
                <h4>设置</h4>
            </div>
            <div class="order-con">
                <div class="freight-edit-nav">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/freight' }">运费模版</el-breadcrumb-item>
                        <el-breadcrumb-item>{{type === 'edit' ? '编辑运费模版' : '新增运费模版'}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="table-box">
                    <div class="freight-edit-content">
                        <div class="freight-edit-content_item" style="align-items: center;">
                            <h3>模版名称</h3>
                            <el-input v-model="freightData.name" placeholder="请输入内容" style="width: 280px; height: 36px"></el-input>
                        </div>
                        <div class="freight-edit-content_item" style="align-items: center;">
                            <h3>计费方式</h3>
                            <el-radio-group v-model="freightData.type">
                                <el-radio label="1">按数量</el-radio>
                                <el-radio label="2">按重量</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="freight-edit-content_item">
                            <h3>配送区域</h3>
                            <div style="flex: 1">
                                <el-table
                                        :data="freightData.areas"
                                        style="width: 100%"
                                        border>
                                    <el-table-column
                                            :resizable="false"
                                            label="可配送区域">
                                        <template slot-scope="scope">
                                            <p>{{ getProvinces(scope.row.provinces) }}</p>
                                            <el-button @click="editArea(scope.row.provinces, scope.$index)" type="text" size="mini" style="float: right;margin-right: 10px">编辑</el-button>
                                            <el-button @click="delArea(scope.$index)" type="text" size="mini" style="float: right;margin-right: 10px">删除</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            :resizable="false"
                                            :label="`${freightData.type== 1 ? '首件（Kg）' : '首重（Kg）'}`"
                                            width="200">
                                        <template slot-scope="scope">
                                            <el-input-number v-model="scope.row.first_number" controls-position="right" :min="0"></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            :resizable="false"
                                            label="运费（元）"
                                            width="200">
                                        <template slot-scope="scope">
                                            <el-input-number v-model="scope.row.first_price" controls-position="right" :min="0"></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            :resizable="false"
                                            :label="`${freightData.type== 1 ? '续件（Kg）' : '续重（Kg）'}`"
                                            width="200">
                                        <template slot-scope="scope">
                                            <el-input-number v-model="scope.row.continue_number" controls-position="right" :min="0"></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            :resizable="false"
                                            label="续费（元）"
                                            width="200">
                                        <template slot-scope="scope">
                                            <el-input-number v-model="scope.row.continue_price" controls-position="right" :min="0"></el-input-number>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="fy-table-footer">
                                    <el-button @click="addArea" type="text" size="mini" style="height: 36px">
                                        指定可配送区域和运费
                                    </el-button>
                                </div>
                            </div>
                        </div>

                        <div class="freight-edit-content_item" style="padding-left: 76px">
                            <el-button @click="submit" type="primary" size="mini" style="width: 88px; height: 36px">保存</el-button>
                            <el-button @click="back" size="mini" style="width: 88px; height: 36px">返回</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <freight-dialog ref="freightDialog" @freightDialog="submitDialog"></freight-dialog>
    </section>
</template>

<script>
    import FreightDialog from './components/FreightDialog.vue';

    export default {
        // 全局感知
        name: "FreightEdit",

        // 模板依赖
        components: {FreightDialog},
        filters: {},

        // 接口
        props: {},

        // 本地状态
        data() {
            return {
                type: 'add',
                freightData: {
                    name: '模版',
                    type: '1',
                    areas: []
                },
                area:  {
                    first_number: 0,
                    first_price: 0,
                    continue_number: 0,
                    continue_price: 0,
                    provinces: []
                },
                loading: false,
            };
        },
        computed: {},

        // 事件
        watch: {},
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },
        mounted() {
            this.initData();
        },
        beforeUpdate() {
        },
        updated() {
        },
        beforeDestroy() {
        },
        destroyed() {
        },

        // 非响应式的属性
        methods: {
            initData() {
                this.type = this.$route.query.type;
                if(this.type === 'edit' && this.$route.query.id) {
                    this.loading = true;
                    axios
                        .get(`admin_freights/${this.$route.query.id}`, {
                        })
                        .then(res => res.data.data)
                        .then(res => {
                            res ? this.freightData = res : this.type = 'add';
                            this.freightData.type = this.freightData.type + '';
                            this.loading = false;
                        })
                }else {
                    this.type = 'add'
                }
            },
            submit() {
                if(!this.freightData.name && this.freightData.name === ''){
                    this.$message.error('模版名称不存在');
                } else if(!this.freightData.type && this.freightData.type === ''){
                    this.$message.error('计费方式不存在');
                } else if(!this.freightData.areas.length){
                    this.$message.error('配送区域不存在');
                } else {
                    this.loading = true;
                    let data = Object.assign({}, this.freightData);
                    data.areas.forEach(item=>{
                        item.province_ids = item.provinces.map(province => province.id);
                        delete item.provinces;
                    });
                    const url = this.type === 'edit' ? `/${this.$route.query.id}` : '';
                    this.type === 'edit' ? data._method = 'PUT' : '';
                    axios
                        .post('admin_freights' + url, data)
                        .then(res => {
                            this.loading = false;
                            this.$router.back();
                        })
                }

            },
            back() {
                this.$router.back()
            },
            addArea() {
                this.$refs.freightDialog.showDialog('add', [])
            },
            editArea(provinces, index) {
                this.$refs.freightDialog.showDialog('edit', provinces, index);
            },
            delArea(index) {
                this.freightData.areas.splice(index, 1);
            },
            submitDialog(type, data, index) {
                if(type === 'add'){
                    let area = JSON.parse(JSON.stringify(this.area));
                    area.provinces = data;
                    data.length ?  this.freightData.areas.push(area) : this.$message('地址为空');
                }else if(type === 'edit'){
                    data.length ?  this.freightData.areas[index].provinces = data : this.$message('地址为空');
                }
            },
            getProvinces(data) {
                const textList = data.filter(item => item.level === 1).map(item => item.text);
                return textList.join("、");
            },
        }
    }
</script>

<style scoped>
    .order-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .order-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .table-box {
        min-height: calc(100vh - 92px);
    }

    .freight-edit-nav {
        padding: 10px;
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid #C8C8C8;
    }

    .freight-edit-content {
        padding: 40px;
    }

    .freight-edit-content_item {
        margin-bottom: 20px;
        min-height: 50px;
        display: flex;
        flex-direction: row;
    }

    .freight-edit-content_item h3 {
        margin: 0 20px 0 0;
        color: #333333;
        font-size: 14px;
    }

    .fy-table-footer {
        padding: 5px 20px;
        box-sizing: border-box;
        width: 100%;
        border: 1px solid #ebeef5;
        border-top: 0 solid #ebeef5;
    }
</style>
<style>
    .freight-edit-content .el-table th.is-leaf, .freight-edit-content .el-table td {
        border-bottom: 1px solid #ebeef5;
    }

    .freight-edit-content .el-table--border th {
        border-top: 1px solid #ebeef5;
        background: #F6F6F6;
    }

    .freight-edit-content .el-table--border td {
        border-right: 1px solid #ebeef5;
    }

    .freight-edit-content .el-table--border {
        border-left: 1px solid #ebeef5;
    }

    .freight-edit-content .el-radio {
        margin-bottom: 0;
    }
</style>